Vue.component("ly-frame", {
    template: `
    <el-container>
        <el-header style="background-color: #eee" :style="getHeaderStyle()">
            <div class="flex c1200">
                <div class="flex">
                    <el-image v-if="opt.logo" :src="opt.logo" style="height: 60px"></el-image>
                    <h3 style="margin: 10px">{{opt.name}}</h3>
                </div>
                <div>
                    <el-link v-if="user && opt.login">{{user[opt.login.showColumn] || user[opt.login.nameColumn]}} 您好!</el-link>
                    <el-link v-if="user" @click.prevent="$refs.login.showReset()">修改密码</el-link>
                    <el-link v-if="!user" @click.prevent="$refs.login.showLogin()">登录</el-link>
                    <el-link v-if="!user" @click.prevent="$refs.login.showReg()">注册</el-link>
                    <el-link v-if="user" @click.prevent="$refs.login.logout()">退出</el-link>
                </div>
            </div>
        </el-header>
        <el-main class="c1200">
            <slot name="content" :opt="opt"></slot>
        </el-main>
        <el-footer style="background-color: #eee; height: auto; padding: 5px; text-align: center">
            {{opt.name}}
            <ly-login ref="login" @change-user="changeUser"></ly-login>
        </el-footer>
    </el-container>
    `,
    data() {
        return {
            opt: {},
            user: null
        }
    },
    created() {
        axios.get("/demo/options").then(res => {
            this.opt = res.data;
            return axios.get("/login/options");
        }).then(res => {
            this.opt.login = res.data;
            this.$forceUpdate();
        });
    },
    methods: {
        changeUser(user) {
            this.user = user;
            this.$emit("change-user", user);
        },
        getHeaderStyle() {
            if (this.opt.bgimg) {
                return {backgroundImage: `url('${this.opt.bgimg}')`}
            }
        }
    }
})

Vue.component("ly-menu", {
    props: ["data", "style", "target"],
    data() {
        return {menus: []};
    },
    template: `
    <el-menu :style="style" style="width: 100%" @select="select">
        <template v-for="m in menus">
            <el-submenu v-if="m.menus" :index="m.title">
                <template slot="title">
                   <span slot="title" class="flex">
                        <label :class="m.icon"> {{m.title}}</label>
                        <label style="margin-right: 20px"><slot name="right" :menu="m"></slot></label>
                   </span>
                </template>
                <el-menu-item v-for="sm in m.menus" :index="sm.title" style="padding-right: 0px">
                    <span slot="title" class="flex">
                        <label :class="sm.icon"> {{sm.title}}</label>
                        <label style="margin-right: 40px"><slot name="right" :menu="sm"></slot></label>
                    </span>
                </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="m.title" style="padding-right: 0px">
                <span slot="title" class="flex">
                     <label :class="m.icon"> {{m.title}}</label>
                     <label style="margin-right: 40px"><slot name="right" :menu="m"></slot></label>
                </span>
            </el-menu-item>
        </template>
    </el-menu>
    `,
    created() {
        this.menus = this.data;
    },
    methods: {
        select(index) {
            let menu;
            function find(menus) {
                for (let m of menus) {
                    if (m.title == index) {
                        return menu = m;
                    } else if (m.menus) {
                        if (find(m.menus)) return true;
                    }
                }
            }
            find(this.menus);
            if(menu.href){
                open(menu.href,menu.target || this.target || "_blank");
            } else {
                this.$emit("select", menu);
            }
        }
    }
});